window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1.鼠标经过preview_img就显示和隐藏 mask遮挡层和big大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';

    })
    preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';

        })
        //2.鼠标移动的时候让黄色盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function(e) {
        // (1)计算鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        //(2)盒子高度300一半是150 就是mask left top 值
        // (3)mask的移动距离
        var maskX = x - mask.offsetWidth / 2
        var maskY = y - mask.offsetHeight / 2
            //(4)如果x的坐标小于0就让他停在0的位置
            //遮挡层最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3.大图片移动距离
        //大图
        var bigImg = document.querySelector('.bigImg');
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        //大图移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })

})
$(function() {
    //1.点击上部的li当前li添加current类 其余兄弟移除
    $(".detail_tab_list li").click(function() {
        $(this).addClass("current").siblings().removeClass("current");
        //2.点击同时获取当前li的索引号
        var index = $(this).index();
        // console.log(index);
        //3.让下部里面索引号item显示其余隐藏
        $(".detail_tab_con .item").eq(index).show().siblings().hide();
    });



});